<template>
  <div class="big-content">
    <div class="big-flexs">
      <section>
        <img
          @click="tiao(0)"
          class="banner-img"
          :src="type.imgUrls[0].src"
          style="width:100%;height:100%"
        >
      </section>
      <section>
        <div>
          <img
          @click="tiao(1)"
            class="banner-img"
            :src="type.imgUrls[1].src"
            style="width:100%;height:100%"
          >
        </div>
        <div>
          <img
            @click="tiao(2)"
            class="banner-img"
            :src="type.imgUrls[2].src"
            style="width:100%;height:100%"
          >
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  props: ['type'],
  data () {
    return {

    }
  },
  methods: {
    tiao (index) {
      this.$emit('tiaokecheng', this.type.imgUrls[index])
    }
  },
  created () {
    // console.log(this.type, 123333333)
  }
}
</script>
<style lang="less" scoped>
.big-content {
  width: calc(100vw * 686 / 750);
  margin: 0 auto;
  margin-bottom: calc(100vw * 30 / 750);
}
.big-flexs {
  display: flex;
  section {
    flex: 1;
  }
  section:first-of-type {
    background-color: #fcc;
    border-radius: 4px;
    overflow: hidden;
    height: calc(100vw * 419 / 750);
    margin-right: calc(100vw * 26 / 750);
    border-radius: calc(100vw * 8 / 750);
  }
  section:last-of-type > div:last-of-type {
    margin-top: calc(100vw * 25 / 750);
  }
  section:last-of-type > div {
    border-radius: 4px;
    overflow: hidden;
    background-color: #fcc;
    height: calc(100vw * 197 / 750);
    border-radius: calc(100vw * 8 / 750);
  }
}
.banner-img {
  width: 100%;
  height: 100%;
}
</style>
